<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>

<script>
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

export default {
  name: 'QuillEditor',
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      quill: null,
    };
  },
  watch: {
    value(newValue) {
      // 确保只在 Quill 初始化后进行更新
      if (this.quill && this.quill.root.innerHTML !== newValue) {
        setTimeout(() => {
          this.quill.root.innerHTML = newValue;
        }, 0);
      }
    },
  },
  mounted() {
    this.quill = new Quill(this.$refs.editor, {
      theme: 'snow',
      modules: {
        toolbar: [
          [{ header: [1, 2, false] }],
          ['bold', 'italic', 'underline'],
          ['link', 'image', 'clean'], // 添加工具
        ],
      },
    });

    // 监听 Quill 的文本变化
    this.quill.on('text-change', () => {
      this.$emit('input', this.quill.root.innerHTML);
    });

    // 初始化编辑器内容
    this.quill.root.innerHTML = this.value;
  },
  beforeDestroy() {
    // 确保 quill 是一个有效的实例
    if (this.quill && typeof this.quill.disable === 'function') {
      this.quill.disable(); // 禁用事件
      this.quill = null; // 清空引用
    }
  },
};
</script>

<style scoped>
/* 可以根据需要调整编辑器的样式 */
.quill {
  height: 400px; /* 自定义高度 */
}
</style>
